<template>
  <div class="warrper">
    <div id="mapContainer" style="width:400px; height:400px"></div>
  </div>
</template>
<script>
require('echarts/extension/bmap/bmap');
export default {
  data(){
    return {
    }
  },
  methods:{
  },
  mounted() {
    let option = {
      animation: false,
      bmap: {
          center: [108.1, 33.2],
          zoom: 5,
          roam: true,
          mapStyle: {
              styleJson: [
                  // 隐藏国道
                  {
                      "featureType": "highway",
                      "elementType": "all",
                      "stylers": {
                          "color": "#00000000"
                      }
                  },
                  //城市主干道隐藏
                  {
                      "featureType": "arterial",
                      "elementType": "all",
                      "stylers": {
                          "color": "#cfe2f3ff"
                      }
                  }

              ]
          }
      },
      visualMap: {
          show: true,
          left: 'right',
          top:'bottom',
          min: 0,
          max: '',
          // seriesIndex: 0,
          calculable: true,
          inRange: {
              // color: ['#24f5d8', '#e7b106', '#f55f24', '#FF753F', '#A8380C']
              color: ['#24f5d8', '#e7b106', '#f55f24', '#FF753F', '#A8380C']
              // color: ['red', 'green', 'yellow', 'blue', 'white']
          }
      },
      series: [{
          type: 'heatmap',
          coordinateSystem: 'bmap',
          // data: points,
          data: [[121.472644, 31.231706, 1],[121.472644, 31.231706, 1],[121.472644, 31.231706, 1]],
          pointSize: 10,
          blurSize: 2,
          //颜色透明度，
          minOpacity:0.4,
          maxOpacity:0.7
      }]
    };
    option.visualMap.max = 10
    let myChart = this.$echarts.init(document.getElementById('mapContainer'));
    myChart.setOption(option);

    // this.$nextTick(() => {
    //   setTimeout(function() {
        var bmap = myChart.getModel().getComponent('bmap').getBMap();
        bmap.addControl(new window.BMap.MapTypeControl());
        var navigationControl = new window.BMap.NavigationControl({
            // 靠左上角位置
            anchor: window.BMAP_ANCHOR_TOP_LEFT,
            // LARGE类型
            type: window.BMAP_NAVIGATION_CONTROL_LARGE,
            // 启用显示定位
            enableGeolocation: true
        });
        bmap.addControl(navigationControl);
        // myChart.setOption(option);
    //   }, 300);
    // });

  }
}
</script>
<style lang = "stylus" scoped>

</style>

